<script lang="ts">
	import { onMount } from 'svelte';
	import '../lib/styles/index.scss';
	import { ensurePortalContainer } from '$lib/utils/container/ensurePortalContainer';
	import { themeStore } from '$lib/stores/theme';

	let { children } = $props<{
		children: any; // 根据实际类型调整（如 ReactNode 或 Svelte 子元素类型
	}>();

	onMount(() => {
		/**
		 * 初始化挂载容器
		 * @returns {HTMLElement}
		 */
		ensurePortalContainer('popovers-container');
		themeStore.iniUserPrefer();		
		// // 初始化主题
		// const savedTheme = localStorage.getItem('preferred-theme');
		// const saveLayout = localStorage.getItem('preferred-layout');
		// const savedMappings = localStorage.getItem('color-mappings');

		// // 如果有保存的配置，应用它
		// if (savedTheme && ['light', 'dark'].includes(savedTheme)) {
		// 	themeStore.switchTheme(savedTheme as 'light' | 'dark');
		// }

		// 监听主题变化并保存到localStorage
		// const unsubscribe = themeStore.subscribe((config) => {
		// 	localStorage.setItem('preferred-theme', config.currentTheme);
		// 	localStorage.setItem('preferred-layout', config.currentLayout);
		// 	localStorage.setItem('color-mappings', JSON.stringify(config.colorMappings));
		// });

		// return () => unsubscribe();
	});
</script>

<svelte:head>
	<title>大自营平台</title>
	<meta name="description" content="东海大自营平台" />
</svelte:head>

<div class="app">
	{@render children?.()}
</div>

<style>
	.app {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		position: relative;
	}
</style>
